<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>
<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="患者输血申请单号">
                <el-input placeholder="请输入申请单号" v-model="pagination.transfusionNumber"></el-input>
            </el-form-item>
            <el-form-item label="术中输血申请状态">
                <el-select   v-model="pagination.state" style="width:100px">
                    <el-option  v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" >
                    </el-option></el-select>
            </el-form-item>
            <el-form-item label="申请日期">
                <el-date-picker v-model="pagination.dateTime" type="daterange" size="small" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="审核日期">
                <el-date-picker v-model="pagination.dateTime1" type="daterange" size="small" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
                <el-button type="primary" @click="batchDelete">删除</el-button>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-dialog title="术中输血申请" center :visible.sync="dialogSurgeyVisible" width="45%" @close="cancel">
            <!-- 内容的主体区域 -->
            <el-descriptions   :content-style="rowCenter" :label-style="rowCenter" class="margin-top"  :column="3"   border>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        输血申请单号
                    </template>
                    {{ surgeySample.transfusionNumber}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        病历号
                    </template>
                    {{ surgeySample.medicalRecordNumber}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        身份证号
                    </template>
                    {{ surgeySample.patientIdcard}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        ABO血型
                    </template>
                    {{getABOName(surgeySample.aboBloodType)}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        Rh血型
                    </template>
                    {{ getRhName(surgeySample.rhBloodType)}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        临床诊断
                    </template>
                    {{ surgeySample.clinicalDiagnosis}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        输血目的
                    </template>
                    {{ surgeySample.transfusionPurpose}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        自体输血时间
                    </template>
                    {{ surgeySample.autologousTransfusionTime}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        自体血回收量
                    </template>
                    {{ surgeySample.autologousRecycleVolume}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液稀释量
                    </template>
                    {{ surgeySample.bloodDilution}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液单位
                    </template>
                    {{ surgeySample.bloodDilution}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        操作者
                    </template>
                    {{ surgeySample.operator}}</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        操作日期
                    </template>
                    {{ surgeySample.operationTime}}</el-descriptions-item>


            </el-descriptions>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="pass()">通 过</el-button>
                </span>
        </el-dialog>
        <el-table  ref="transfusionTable"  :data="tableData" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change=""  fit>

            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="transfusionNumber" label="申请单号"style = " width: 25% " align="center">
            </el-table-column>
            <el-table-column prop="applicantId" label="申请人工号"  align="center">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间"  align="center">
            </el-table-column>
            <el-table-column prop="reviewerId" label="审核人工号"  align="center">
            </el-table-column>
            <el-table-column prop="reviewTime" label="审核时间"  align="center">
            </el-table-column>
            <el-table-column prop="state" label="状态" style = " width: 25% " align="center">
                <template slot-scope="scope">
                    {{ getStateName(scope.row.state)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" style = " width: 25% " align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" id="review" @click="viewInfo(scope.$index,scope.row)" :disabled="scope.row.state == '1' ? false : true">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination :page-sizes="[5,10,20]"
                           :page-size="pagination.pageSize"
                           :total="pagination.total"
                           :current-page="pagination.currentPage"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                           layout="total,sizes,prev, pager, next, jumper"
                           class="pagination"
                           style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>

    </template>
</div>

<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/axios.min.js"></script>

<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.min.css" rel="stylesheet">
<script src="/js/httpVueLoader.js"></script>
<script src="/js/jquery.min.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    options: [{
                        value: '1',
                        label: '等待审核'
                    }, {
                        value: '2',
                        label: '通过'
                    },
                    ],
                    page: {},
                    name: '',
                    pageNum: 1,
                    pageSize: 8,
                    form: {},
                    //搜索样本信息
                    searchSample: {
                        bloodSampleNumber: '',  //编号
                        dateVal: '',    //日期范围
                    },
                    rowCenter:{
                        "text-align":"center"
                    },
                    //申请状态
                    stateTypeList:[],
                    optionAboType:[],
                    optionRhType:[],

                    //表格信息
                    tableData:[
                    ],
                    rejectSample:{ rejectApplication:'',},
                    pagination:{
                        currentPage:1,
                        pageSize:5,
                        total:0,
                        //查询条件
                        transfusionNumber:'',
                        state:'',
                        dateTime:'',
                        dateTime1:'',
                    },
                    size:'',

                    //操作用户
                    user:{
                        "username":"",
                        "jobnum":"",
                    },


                    dialogSurgeyVisible:false,
                    dialogRejectVisible:false,
                    surgeySample: {
                        transfusionNumber: '',
                        medicalRecordNumber: '',
                        patientIdcard:'',
                        aboBloodType: '',
                        rhBloodType: '',
                        clinicalDiagnosis: '',
                        transfusionPurpose: '',
                        autologousTransfusionTime: '',
                        autologousRecycleVolume: '',
                        bloodDilution: '',
                        bloodUnit: '',
                        operator: '',
                        operationTime: '',
                        reviewerId:'',
                    },
                }
            },
            created() {
                // this.loadTable(this.pageNum);
                this.getByQueryPage();
            },
            mounted(){
                this.getStateType();
                this.getStateName();
                this.getABOtype();
                this.getRhType();
                this.getABOName();
                this.getRhName();
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};

            },
            methods: {
                handleEdit(index, row) {
                    this.form={}
                    console.log(index, row);
                    this.updateForm=row
                    this.dialogUpdateVisible = true
                },

                loadTable(num) {
                    this.pageNum = num;
                    $.get("/transfusionSurgey/normal/list").then(res => {
                        this.tableData=res.data.records;
                    });
                },
                handleSizeChange:function(pageSize){
                    this.pagination.pageSize=pageSize;
                    this.getByQueryPage(1)
                },
                handleCurrentChange:function (currentPage) {
                    this.pagination.currentPage = currentPage;//执行查询
                    this.getByQueryPage(1);

                },
                //按条件查询
                getByQueryPage:function(flag){
                    if(flag!=1){
                        this.pagination.transfusionNumber='';
                        this.pagination.state='';
                        this.pagination.dateTime='';
                        this.pagination.dateTime1='';
                        this.pagination.currentPage=1
                    }
                    if(this.pagination.dateTime!=null){
                        this.startTime=this.pagination.dateTime[0]
                        this.endTime=this.pagination.dateTime[1]
                    }
                    if(this.pagination.dateTime1!=null){
                        this.reviewStartTime=this.pagination.dateTime1[0]
                        this.reviewEndTime=this.pagination.dateTime1[1]
                    }
                    axios.get('/transfusionSurgey/normal/'+this.pagination.currentPage+'/'+this.pagination.pageSize,
                        {
                            params:{
                                transfusionNumber:this.pagination.transfusionNumber,
                                state:this.pagination.state,
                                startTime:this.startTime,
                                endTime:this.endTime,
                                reviewStartTime:this.reviewStartTime,
                                reviewEndTime:this.reviewEndTime,
                            }
                        }).then(res => {
                        console.log("+++++")
                        if(res.data.code === 200){
                            this.pagination.pageSize=res.data.data.size;
                            this.pagination.currentPage=res.data.data.current;
                            this.pagination.total=res.data.data.total;
                            this.tableData=res.data.data.records;
                        }else{
                            this.$message.error("查询失败")
                        }
                    })
                },
                //获取输血申请状态字典
                getStateType(){
                    $.ajax({
                        url: '/transfusionClinic/normal/typelist',
                        type: 'get',
                        contentType: 'application/json',
                    }).then((res) =>{
                            this.stateTypeList=res
                            console.log(res)
                    })
                },
                //将数据字典数据转为中文
                getStateName(code){
                    for (let i=0; i<this.stateTypeList.length; i++){
                        if(this.stateTypeList[i].code === code){
                            return this.stateTypeList[i].state;
                        }
                    }

                },

                //获取abo数据字典
                getABOtype(){
                    $.ajax({
                        url: '/aboType/normal/type',
                        type: 'get',
                        contentType: 'application/json',
                    }).then(res => {
                        this.optionAboType=res?res:{}
                        console.log(res)
                    })
                },
                //将code转为name
                getABOName(code){
                    for (let i=0; i<this.optionAboType.length; i++){
                        if(this.optionAboType[i].code === code){
                            return this.optionAboType[i].name;
                        }
                    }

                },
                //获取Rh数据字典
                getRhType(){
                    $.ajax({
                        url: '/rhType/normal/type',
                        type: 'get',
                        contentType: 'application/json',
                    }).then(res => {
                        this.optionRhType=res?res:{}
                    })
                },
                //code转为name
                getRhName(code){
                    for (let i=0; i<this.optionRhType.length; i++){
                        if(this.optionRhType[i].code === code){
                            return this.optionRhType[i].name;
                        }
                    }

                },
                //点击审核展示术中输血申请信息
                viewInfo(index,row) {
                    this.surgeySample = row
                    $.post("/transfusionSurgey/normal/applyList",{transfusionNumber:row.transfusionNumber}).then(res => {
                        this.surgeySample=JSON.parse(JSON.stringify(res.data[0]))
                        console.log(this.surgeySample)
                        console.log(res)
                        this.dialogSurgeyVisible = true;
                    });
                },
                //通过术中输血申请信息
                pass(reviewerId){
                    reviewerId=this.user.jobnum;
                    let data = JSON.stringify(this.surgeySample);
                    console.log(data)
                    $.ajax({
                        url: '/transfusionSurgey/review/pass?reviewerId='+reviewerId,
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogSurgeyVisible = false;
                        this.loadTable(1);
                    })
                },
                //批量删除
                batchDelete() {
                    if(JSON.parse(JSON.stringify(this.$refs.transfusionTable.selection)).length===0){
                        this.$notify({
                            title: '温馨提示：',
                            message: '您未选中数据，请重新操作！！！',
                            type: 'warning'
                        });
                        return;
                    }
                    let checkArr = JSON.parse(JSON.stringify(this.$refs.transfusionTable.selection));  // 存储了勾选到的数据
                    var ids=new Array()
                    for(var i=0;i<checkArr.length;i++){
                        ids[i]=checkArr[i].id;
                    }
                    console.log("打印所选编号")
                    console.log(ids)
                    // let data={ids:ids}
                    //批量删除
                    this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            url: '/transfusionSurgey/normal/batchDelete',
                            method: 'put',
                            dataType: 'json',
                            data:ids
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$notify({
                                    tile: '温馨提示',
                                    message: '批量删除成功！！！',
                                    type: 'success'
                                })
                                this.getByQueryPage(0);
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '删除出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '删除失败',
                            })
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //取消按钮
                cancel() {
                    this.dialogRejectVisible = false
                }
            }

        })
    })()
</script>
</body>
</html>